<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: SOAP, List loading</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style.css" media="screen" />
  <link rel="alternate stylesheet" type="text/css" title="Vista Style" href="../../style/tree/vista/style.css" media="screen" />
  <link rel="alternate stylesheet" type="text/css" title="Default Style" href="../../style/tree/default/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .Basis-Tree
    {
      width: 250px;
      height: 300px;
      border: 1px solid #888;
      position: relative;
    }

    .Basis-Tree .loading
    {
      position: absolute;
      top: 2px;
      left: 2px;
      padding: 2px 1ex;
      background: gold;
      font-size: 85%;
      text-align: center;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style_ie.css" media="screen" />
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis.js"></script>
  <script type="text/javascript" src="../../data.js"></script>
  <script type="text/javascript" src="../../dom_wrapper.js"></script>
  <script type="text/javascript" src="../../ajax.js"></script>
  <script type="text/javascript" src="../../xml.js"></script>
  <script type="text/javascript" src="../../soap.js"></script>
  <script type="text/javascript" src="../../entity.js"></script>
  <script type="text/javascript" src="../../tree.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: SOAP, List loading</h1>
  
  <p id="demo-summary">
    Simple example of Basis.SOAP
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">
    // IMPORTANT: Host server must has url proxy for pathes starts with /w1service
    // to http://service.w1.ru/10/
    // So, /w1service/PublicService.asmx should be proxed to 
    // http://services.w1.ru/10/PublicService.asmx

    var demoContainer = Basis.DOM.get('demo-container');

    // create provider group data type
    var ProviderGroup = new Basis.Entity.EntityType({
      name: 'ProviderGroup',
      id: 'ProviderGroupId',
      fields: {
        ProviderGroupId: String,
        Title: String,
        ProviderCount: Number,
        ActiveProviderCount: Number
      }
    });

    // create service and it's method
    var service = new Basis.SOAP.Service('/w1service/PublicService.asmx', 'Wallet.Public.WebService');
    var getProviderGroup = service.createMethodCall('GetProviderGroups', true, {
      mapping: {
        // force converting ProviderGroup element to array in response
        // it make sence only if one ProviderGroup element in response
        ProviderGroup: { forceArray: true }
      },
      body: {
        // method parameters
        CultureId: 'en-US',
      },
      callback: {
        start: function(){
          ProviderGroup.all.setState(Basis.Data.STATE.PROCESSING)
        },
        failure: function(){
          ProviderGroup.all.setState(Basis.Data.STATE.ERROR)
        },
        success: function(envelopeData){
          // synchonize with current dataset
          ProviderGroup.all.sync(this.responseBody().ProviderGroup);

          // change dataset state to READY
          ProviderGroup.all.setState(Basis.Data.STATE.READY)
        }
      }
    });

    // add trigger button
    Basis.DOM.insert(demoContainer,
      Basis.DOM.createElement(
        {
          description: 'BUTTON',
          click: function(){
            getProviderGroup.call();
          }
        },
        'Load provider list'
      )
    );

    // create provider group list
    new Basis.Controls.Tree.Tree({
      container: demoContainer,

      // set source dataset
      collection: ProviderGroup.all,

      // make it sensetive to dataset state changes
      info: ProviderGroup.all,

      // customize item class
      childClass: Basis.Class(Basis.Controls.Tree.TreeNode, {
        titleGetter: Function.getter('info', '{Title} ({ProviderCount})')
      }),

      // add handler for trace state changes
      handlers: {
        stateChanged: function(object, oldState){
          if (this.state == Basis.Data.STATE.PROCESSING)
          {
            if (!this.loadingLabel)
              this.loadingLabel = Basis.DOM.createElement('.loading', 'loading...');
            Basis.DOM.insert(this.element, this.loadingLabel);
          }  

          if (oldState == Basis.Data.STATE.PROCESSING)
            Basis.DOM.remove(this.loadingLabel);
        }
      }
    });
    
  </script>
</body>

</html>
